<!-- 发票信息  发票地址选择-->
<template>
  <div class="container">
    <van-field
      readonly
      clickable
      label="发票信息"
      :value="invoiceinfo"
      placeholder="选择收货地址"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="btnz"
        @confirm="onConfirminfo"
        @cancel="showPicker = false"
      />
    </van-popup>
    <van-collapse v-model="activeNames" v-if="act !== 2">
      <van-collapse-item :title="invoiceinfo" name="2">
        <p class="careful">
          <span>*</span>如需开具增值税专用发票 请提供一般纳税人证明 >
          <!-- <i @click="submit">提交</i> -->
        </p>

        <van-field
          readonly
          clickable
          :value="defaultAddress"
          placeholder="选择收货地址"
          @click="showPicker1 = true"
        />
        <van-popup v-model="showPicker1" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm "
            @cancel="showPicker1 = false"
          />
        </van-popup>

        <!-- <div v-if="show1">
          <van-field v-model="id_card" label="身份证号：" placeholder="居民身份证号码..." @blur="idCard" />
        </div>
        <br />
        <div v-if="show2">
          <van-field
            v-model="invoice_rise"
            label="发票抬头："
            placeholder="发票抬头..."
            @blur="InvoiceRise"
          />
        </div>-->
        <!-- <p
          style="color:#f40;font-size:12px;"
          v-if="show1"
        >*温馨提示：个人 普通增值税发票必须需要填写身份证号码 公司 普通增值发票可以不填写身份证号码......</p>-->
        <p style="font-size:12px;color:red;">*系统默认发票寄送地址与产品收货地址一致；不一致时，发票邮寄费用请买家自行承担。</p>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>
<script>
export default {
  name: "InvoiceInfo",
  props: {
    defaultAddress: String,
    // changesUser: String,
    // ReceivingAddressID: Number
  },
  data() {
    return {
      invoiceinfo: ["不开发票"],
      showPicker: false,
      showPicker1: false,
      activeNames: ["2"],
      columns: [],
      addressId: "", // 发票地址id存储
      // id_card: null, // 身份证号
      // invoice_rise: null, // 发票抬头
      defaultAddress: "", // 默认地址
      getAddressData: [], // 获取地址存储的数组
      act: 2, //发票类型的 选项的 active
      btnz: ["增值税普通发票", "增值税专用发票", "不开发票"]
    };
  },

  methods: {
    onConfirminfo(value, index) {
      // console.log("确认选择该地址", value, index);
      this.act = index;
      console.log(this.act)
      this.invoiceinfo = this.btnz[index];
      this.showPicker = false;
      this.$emit("invoicetype", this.act);
    },
    onConfirm(value, index) {
      // console.log("确认选择该地址", value, index);
      this.defaultAddress = value;
      this.showPicker1 = false;
      this.$emit("InvoiceInfoIDChange", this.addressId);
      console.log(this.addressId)
    },
    // 增值税专用发票证明提交
    submit() {
      this.$router.push("/pim/pimrecord4");
    },

    // // 身份证号
    // idCard() {
    //   this.$store.commit("id_card", this.id_card);
    // },

    // // 发票抬头
    // InvoiceRise() {
    //   this.$store.commit("invoiceRise", this.invoice_rise);
    // },

    // 获取发票地址
    async getAddress() {
      const user_id = window.localStorage.getItem("user_id");
      let address = await this.$http({
        method: "post",
        url: "home/index/getaddresslist",
        data: {
          user_id,
          type: "2"
        }
      });
      if (address.data.State.Code == 200) {
        console.log(address);
        this.getAddressData = address.data.data;
        this.getAddressData.forEach((item, index) => {
          if (item.is_default == 1) {
            this.addressId = item.city_id;
            this.defaultAddress = `${item.province_name}${item.city_name} ${item.district_name} ${item.address} ${item.consignee} ${item.phone}`;
            this.columns.push(this.defaultAddress);
            console.log(this.addressId, this.defaultAddress);
          }
          this.getAddressData = `${item.province_name}${item.city_name} ${item.district_name} ${item.address} ${item.consignee} ${item.phone}`;
        });
      }
    }
  },
  mounted() {
    this.getAddress();
  }
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  .careful {
    font-size: 12px;
    letter-spacing: 0.5px;
    line-height: 24px;
    margin-left: 15px;
    span {
      color: #ff0000;
    }
    i {
      color: #0078ff;
      cursor: pointer;
    }
  }
}
</style>

